<template>
  <scrollbar>
    <keep-alive>
      <router-link
        v-for="(item, index) in routeList"
        :key="index"
        tag="span"
        :class="['link-tag', $route.path === item.path ? 'tag-highlight' : '']"
        :to="item.path"
        >{{ item.meta.title }}
        <span class="el-icon-close" />
      </router-link>
    </keep-alive>
  </scrollbar>
</template>

<script>
import scrollbar from "../scrollbar/index.vue";
import { mapState } from "vuex";
export default {
  components: {
    scrollbar,
  },
  data() {
    return {
      routeList: [],
    };
  },
  computed: {
    ...mapState(["routeTag"]),
  },
  watch: {
    $route(val) {
      console.log(val);
    },
  },
  created() {
    this.routeList = this.routeTag;
  },
  activated() {
    this.routeList = this.routeTag;
  },
};
</script>

<style lang="scss" scoped>
.link-tag {
  padding: 0 5px;
  border-radius: 3px 3px 0 0;
  border: 1px solid #ddd;
  cursor: pointer;
}
.tag-highlight {
  background-color: #b8d6c2;
}
</style>
